<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态数字时钟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #1a1a1a;
            font-family: 'Courier New', monospace;
        }

        .clock-container {
            background-color: #2c3e50;
            padding: 30px 50px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }

        #clock {
            color: #ecf0f1;
            font-size: 4em;
            display: flex;
            align-items: baseline;
        }

        .time-segment {
            padding: 0 10px;
            background-color: #34495e;
            border-radius: 8px;
            margin: 0 5px;
        }

        .separator {
            color: #95a5a6;
            font-size: 0.8em;
            vertical-align: middle;
        }

        #ampm {
            font-size: 0.4em;
            margin-left: 15px;
            color: #bdc3c7;
            vertical-align: super;
        }

        /* 添加时间数字跳动动画 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .time-segment {
            animation: pulse 1s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <div id="clock">
            <span class="time-segment" id="hours">00</span>
            <span class="separator">:</span>
            <span class="time-segment" id="minutes">00</span>
            <span class="separator">:</span>
            <span class="time-segment" id="seconds">00</span>
            <span id="ampm">AM</span>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const hoursElement = document.getElementById('hours');
        const minutesElement = document.getElementById('minutes');
        const secondsElement = document.getElementById('seconds');
        const ampmElement = document.getElementById('ampm');

        // 更新时间函数
        function updateClock() {
            const now = new Date();
            
            // 获取时间组成部分
            let hours = now.getHours();
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            
            // 转换为12小时制
            const ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12 || 12; // 将0点转换为12点

            // 更新显示
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes;
            secondsElement.textContent = seconds;
            ampmElement.textContent = ampm;

            // 添加动态效果
            secondsElement.style.color = `hsl(${now.getSeconds() * 6}, 70%, 60%)`;
        }

        // 立即执行一次更新避免初始空白
        updateClock();

        // 每秒更新一次时间
        setInterval(updateClock, 1000);

        // 添加窗口大小变化时的响应式调整
        window.addEventListener('resize', () => {
            const baseSize = Math.min(window.innerWidth, window.innerHeight);
            document.getElementById('clock').style.fontSize = `${baseSize / 15}px`;
        });
    </script>
</body>
</html>